<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #ccc;
        }

        .box {
            text-align: center;
        }

        .myCanvas {
            background-color: #fff;
        }
    </style>

    <script>
        window.onload = function () {
            let myCanvas = document.querySelector('.myCanvas')
            let context = myCanvas.getContext('2d')

            function showClock() {
                // 获取日期对象中的时分秒
                let dt = new Date()
                let seconds = dt.getSeconds();
                console.log(seconds);

                // 清空表盘
                context.clearRect(0, 0, 600, 600);

                // 表盘
                context.beginPath()
                context.arc(300, 300, 200, Math.PI / 180 * 0, Math.PI / 180 * 360);
                context.lineWidth = 10;
                context.stroke();
                context.closePath();

                // 绘制时针刻度
                context.save()
                context.beginPath();
                context.translate(300, 300);
                for (let i = 0; i < 12; i++) {
                    context.rotate(Math.PI / 180 * 30);
                    context.moveTo(180, 0)
                    context.lineTo(200, 0);
                    context.lineWidth = 5;
                    context.stroke();
                }
                context.closePath();
                context.restore();

                // 绘制分针刻度
                context.save()
                context.beginPath();
                context.translate(300, 300);
                for (let i = 0; i < 60; i++) {
                    context.rotate(Math.PI / 180 * 6);
                    context.moveTo(190, 0)
                    context.lineTo(200, 0);
                    context.lineWidth = 4;
                    context.stroke();
                }
                context.closePath();
                context.restore();

                // 绘制时针
                context.save()
                context.beginPath();
                context.translate(300, 300);
                context.rotate(Math.PI / 180 * (30 * (dt.getHours() % 12) - 90));
                context.moveTo(-20, 0)
                context.lineTo(170, 0);
                context.strokeStyle = 'gray';
                context.lineWidth = 5;
                context.stroke();
                context.closePath();
                context.restore();

                // 绘制分针
                context.save()
                context.beginPath();
                context.translate(300, 300);
                context.rotate(Math.PI / 180 * (6 * dt.getMinutes() - 90));
                context.moveTo(-20, 0)
                context.lineTo(170, 0);
                context.strokeStyle = 'red';
                context.lineWidth = 3;
                context.stroke();
                context.closePath();
                context.restore();

                // 绘制秒针
                context.save()
                context.beginPath();
                context.translate(300, 300);
                context.rotate(Math.PI / 180 * (6 * seconds - 90));
                context.moveTo(-20, 0)
                context.lineTo(150, 0);
                context.strokeStyle = 'orange';
                context.lineWidth = 2;
                context.stroke();
                context.closePath();
                context.restore();

                // 时针分针秒针外部的卡扣
                context.save()
                context.beginPath();
                context.translate(300, 300);
                context.strokeStyle = 'gray';
                context.lineWidth = 2;
                context.arc(0, 0, 5, Math.PI / 180 * 0, Math.PI / 180 * 360);
                context.stroke();
                context.closePath();
                context.restore();
            }

            setInterval(showClock, 1000);

        }
    </script>
</head>

<body>
    <div class="box">
        <canvas class="myCanvas" width="600" height="600"></canvas>
    </div>
</body>

</html>